<!DOCTYPE HTML>
<html>

<head>
	<title>For Rent</title>
	<!---css--->
	<link href="../static/css/bootstrap.css" rel='stylesheet' type='text/css'/>
	<link href="../static/css/style.css" rel='stylesheet' type='text/css'/>
	<!---css--->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
	<!---js--->
	<script src="/static/js/jquery-1.11.1.min.js"></script>
	<script src="/static/js/bootstrap.js"></script>
	<!---js--->
	<!-- FlexSlider -->
	<script src="/static/js/jquery.flexslider.js"></script>
	<link rel="stylesheet" href="/static/css/flexslider.css" type="text/css" media="screen"/>
	<link rel="stylesheet" href="/static/css/renting.css" type="text/css" media="screen">
	<script>
        // Can also be used with $(document).ready()
        $(window).load(function () {
            $('.flexslider').flexslider({
                animation: "slide",
                controlNav: "thumbnails"
            });
        });
	</script>
	<script src="/static/js/vue.js"></script>
	<script src="/static/js/jquery.cookie.js"></script>
	<script src="/static/js/axios.js"></script>
	<!-- //FlexSlider-->
</head>

<body>
<div class="header-section">
	<div class="container">
		<nav class="navbar navbar-default">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
						data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<div class="navbar-brand">
					<h1><a href="index.html"><span>Real </span>Space</a></h1>
				</div>
			</div>
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li><a href="index">主页 <span class="sr-only">(current)</span></a></li>
					<li><a href="secondlist">二手房</a></li>
					<li><a href="rentlist">租房</a></li>
					<li><a href="newhourse">新房 </a></li>
					<li><a href="community">小区</a></li>
					<li><a href="broker">经纪人</a></li>
					<li><a href="knowledge">知识</a></li>
				</ul>
				<div class="email" v-if="name==null">
					<ul>
						<li><i class="glyphicon glyphicon-log-in" aria-hidden="true"></i><a href="#" data-toggle="modal"
																							data-target="#myModal">登陆</a>
						</li>
						<li><i class="glyphicon glyphicon-lock" aria-hidden="true"></i><a href="#" data-toggle="modal"
																						  data-target="#myModal1">注册</a>
						</li>
					</ul>
				</div>
				<div class="login-next" v-if="name!=null">
					<img :src="image"
						 style="width: 40px;height: 40px;margin-top: 12px;border-radius: 50%;float: left;margin-left: 140px;">
					<p class="login-p"
					   style="color:white;float: left;margin-top: 15px;margin-left: 5px;font-size: 20px;" v-text="name">
						admin</p>
				</div>
				<div class="clearfix"></div>
			</div>
		</nav>
	</div>
</div>

<div class="banner-section">
	<div class="container">
		<h2>优质小区</h2>
	</div>
</div>

<div class="content">
	<div class="properties-section">
		<div class="container">
			<div class="title-page">
				<!-- Nav tabs -->
				<ul class="nav nav-tabs" role="tablist">
					<li role="presentation" class="active" id="li-s1">
						<a href="#home" aria-controls="home" role="tab" data-toggle="tab">条件筛选</a>
					</li>
					<li role="presentation" id="li-s2">
						<a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" class="hourse-card"
						   @click="cards">选房卡</a>
					</li>
				</ul>

				<!-- Tab panes -->
				<div class="tab-content">
					<div role="tabpanel" class="tab-pane active" id="home">
						<div class="col-lg-6">
							<h3>小区源点</h3>
							<div class="input-group">
								<input type="text" class="form-control" placeholder="区域，商圈，小区应有尽有">
								<span class="input-group-btn">
                                    <button class="btn btn-warning" type="button">Go!</button>
                                </span>
							</div><!-- /input-group -->
						</div><!-- /.col-lg-6 -->
					</div>
					<div role="tabpanel" class="tab-pane" id="profile">
						<div class="slide-on">
							<ul class="clear">
								<div class="znxf-item" class="card1" v-for="c in carddata">
									<a class="znxf-item-con">
										<div class="znxf-tit">
											<i class="tuijian" style="width:32px;">推荐</i>
										</div>
										<div class="znxf-tiaoj">
											<dl>
												<dt>总价</dt>
												<dd>{{c.price}}</dd>
											</dl>
											<dl>
												<dt>面积</dt>
												<dd>{{c.area}}</dd>
											</dl>
											<dl>
												<dt>户型</dt>
												<dd>{{c.type}}</dd>
											</dl>
											<dl>
												<dt>区域</dt>
												<dd>{{c.adress}}</dd>
											</dl>
										</div>
										<div class="znxf-label" v-for="f in c.feature">
											<p>{{f.features}}</p>
										</div>
									</a>
									<span class="glyphicon glyphicon-pencil"></span>
									<span class="glyphicon glyphicon-remove"></span>
								</div>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="properties-grids">
				<div class="col-md-9 forsales-left">
					<div class="forsale">
						<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
							<ul id="myTab" class="nav nav-tabs left-tab" role="tablist">
								<li role="presentation" class="active">
									<a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home"
									   aria-expanded="true">
										<img src="../static/images/menu1.png">
									</a>

								</li>
								<p3>搜索结果</p3>
							</ul>
							<div id="myTabContent" class="tab-content">
								<div role="tabpanel" class="tab-pane fade in active" id="home"
									 aria-labelledby="home-tab" v-for="(main,index) in mainlists">
									<div class="forsale-grids">
										<h4>
											<a href="#">{{main.title}}</a>
										</h4>
										<div class="forsale1">
											<div class="forsale-left">
												<a href="about.html">
													<img :src="main.image" class="img-responsive" alt="/">
												</a>
											</div>
											<div class="yin" style="display: none">{{main.id}}</div>
											<div class="forsale-right">
												<h5>
													{{main.price}}
													<label>万</label> - 单价
													<span>39428</span>元/m²
												</h5>
												<p>{{main.feature}}</p>
												<a class="button4" :href=" '../front/detail1/'+ main.id ">more
													details</a>
											</div>
											<div class="clearfix"></div>
											<ul>
												<li>
													<i class="glyphicon glyphicon-indent-left"></i> {{main.type}}
												</li>
												<li>
													<i class="glyphicon glyphicon-globe"></i> {{main.adress}}
												</li>
												<li>
													<i class="glyphicon glyphicon-record"></i> 一月看房
													<span> {{main.times}} </span>次
												</li>
												<li>
													<i class="glyphicon glyphicon-heart-empty"></i>
													<span>{{main.nice}} </span>人关注
												</li>
												<li>
													<i class="glyphicon glyphicon-usd"></i>
													<span class="prices">{{main.price}}万</span>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-3 properties-right">
					<div class="properties-top">
						<h4>条件筛选</h4>
						<div class="yourplace">
							<h5>位置</h5>
							<select class="sel2" id="s1">
								<option value="" selected="selected">默认</option>
								<option value="">拱墅区</option>
								<option value="">下城区</option>
								<option value="">上城区</option>
								<option value="">滨江区</option>
							</select>
						</div>
						<div class="yourplace">
							<h5>总价</h5>
							<select class="sel2" id="s2">
								<option value="" selected="selected">默认</option>
								<option value="">80万以下</option>
								<option value="">80-150万</option>
								<option value="">150-200</option>
								<option value="">200-300万</option>
							</select>
						</div>
						<div class="yourplace">
							<h5>面积</h5>
							<select class="sel2" id="s3">
								<option value="" selected="selected">默认</option>
								<option value="">50㎡以下</option>
								<option value="">50㎡-70㎡</option>
								<option value="">70㎡-90㎡</option>
								<option value="">90㎡-130㎡</option>
							</select>
						</div>
						<div class="yourplace">
							<h5>户型</h5>
							<select class="sel2" id="s4">
								<option value="" selected="selected">默认</option>
								<option value="">二室</option>
								<option value="">三室</option>
								<option value="">四室</option>
								<option value="">五室</option>
								<option value="">六室</option>
							</select>
						</div>
						<div class="yourplace-grids">
							<div class="col-md-6 yourplace-grid">
								<h5>关注数</h5>
								<select class="sel3" id="s5">
									<option value="" selected="selected">默认</option>
									<option value="">50以下</option>
									<option value="">50-100</option>
									<option value="">100-200</option>
								</select>
							</div>
							<div class="col-md-6 yourplace-grid">
								<h5>点赞数</h5>
								<select class="sel3" id="s6">
									<option value="" selected="selected">默认</option>
									<option value="">200以下</option>
									<option value="">200-500</option>
								</select>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="search1">
							<button class="search1-submit" @click="search1">查找</button>
						</div>
					</div>
					<div class="feature">
						<h4>特色物业</h4>
						<div class="feature-top">
							<img src="../static/images/s6.jpg" class="img-responsive" alt="/">
							<h5>物业1</h5>
							<p>111
								<a href="#">更多></a>
							</p>
						</div>
						<div class="feature-top top2">
							<img src="../static/images/s7.jpg" class="img-responsive" alt="/">
							<h5>物业2</h5>
							<p>111
								<a href="#">更多></a>
							</p>
						</div>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
</div>

<!-- login -->
<div id="not-success">
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content modal-info">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
				</div>
				<div class="modal-body real-spa">
					<div class="login-grids">
						<div class="login">

							<div class="login-right" id="login">
								<form>
									<h3>Login</h3>
									<input type="text" value="Enter your Phone" onfocus="this.value = '';"
										   onblur="if (this.value == '') {this.value = 'Enter your Email';}" required=""
										   id="username">
									<input type="password" value="Password" onfocus="this.value = '';"
										   onblur="if (this.value == '') {this.value = 'Password';}" required=""
										   id="password">
									<h4><a href="#">忘记密码？</a> / <a href="#">注册账号</a></h4>
									<div class="single-bottom">
										<input type="checkbox" id="brand" value="">
										<label for="brand"><span></span>记住我</label>
									</div>
									<button type="button" value="" class="logins">登录</button>
								</form>
							</div>

						</div>
						<p>登陆即同意<a href="#">合约</a></p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- login  -->
	<!-- Register -->
	<div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content modal-info">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
				</div>
				<div class="modal-body real-spa">
					<div class="login-grids">
						<div class="login">
							<div class="login-right">
								<h3>Register </h3>
								<input type="text" value="Name" onfocus="this.value = '';"
									   onblur="if (this.value == '') {this.value = 'Name';}" required="" id="name">
								<input type="text" value="Mobile number" onfocus="this.value = '';"
									   onblur="if (this.value == '') {this.value = 'Mobile number';}" required=""
									   id="phone">
								<input type="password" value="Password" onfocus="this.value = '';"
									   onblur="if (this.value == '') {this.value = 'Password';}" required=""
									   id="passwords">
								<button type="button" value="" class="registers">立即注册</button>
							</div>
							<div class="clearfix"></div>
						</div>
						<p>登陆即同意<a href="#">合约</a></p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script src="/static/js/renting.js"></script>
</body>

</html>